<template>
  <div id="page-search-result" class="container">
    <div class="search-wrap">
      <div class="search-box">
        <div class="search">
          <div
            class="input-wrap"
            :style="{
              borderBottomLeftRadius:
                activeSearchHistory.length > 0 && searchHistoryShow
                  ? '0'
                  : '4px'
            }"
          >
            <i class="icon-search" style="display: inline-block;"></i>
            <input
              name="search-input"
              type="text"
              @blur="inputSearchBlur"
              placeholder="请输入要搜索的内容"
              v-model="inputSearch"
              @click="clickInputSearch"
              @keyup.enter="updateQuery(searchMethod)"
              @keyup="inputKeyup"
              autocomplete="off"
              ref="search-input"
            />
            <ul
              id="query-search"
              v-if="activeSearchHistory.length > 0 && searchHistoryShow"
            >
              <li
                :key="item.key"
                v-for="(item, index) in activeSearchHistory"
                :class="{ active: index == searchHistoryIndex }"
                @mousedown="searchHistoryClick(item.text)"
                @mouseover="searchHistoryMouseover(index)"
              >
                {{ item.text }}
              </li>
              <li style="text-align: right" @click="clearRecord">清除记录</li>
            </ul>
          </div>
          <div @click="updateQuery(1)" class="btn btn-search-title">
            搜索标题
          </div>
          <div @click="updateQuery(2)" class="btn btn-search-all">搜索全文</div>
          <div class="btn-screen" ref="btn-screen" @click="switchScreen">
            筛选 <i class="el-icon-arrow-up" ref="btn-screen-icon"></i>
          </div>
          <div @click="clearSearchCondition" class="clear-search-condition">
            清空选项
          </div>
        </div>
        <div class="keywords" v-show="$store.state.searchResultType == 1">
          <span v-if="searchKeywords">
            <span>关键字：</span>
            <span class="high-light">{{ searchKeywords.substr(0, 38) }}</span>
            {{
              searchMethod == 1
                ? "标题检索"
                : searchMethod == 2
                ? "全文检索"
                : ""
            }}
          </span>
          <span v-if="listPageTotal !== null"
            >共找到
            <span class="high-light">{{ listPageTotal }}</span> 条内容</span
          >
        </div>
      </div>
    </div>
    <main>
      <div class="screen-condition-wrap" ref="screen-condition-wrap">
        <div class="screen-condition">
          <div class="condition-title">采购方式：</div>
          <ul class="screen-condition-list purchase-method">
            <li
              v-for="(item, index) in purchaseOptions"
              :key="item"
              :class="{ active: choosePurchaseIndex.includes(index) }"
              @click="screenChooseSingle(1, index)"
            >
              {{ item }}
            </li>
          </ul>
        </div>
        <div class="screen-condition">
          <div class="condition-title">公告类型：</div>
          <ul class="screen-condition-list announcement">
            <li
              v-for="(item, index) in announcementOptions"
              :key="item"
              :class="{ active: chooseAnnouncementIndex.includes(index) }"
              @click="screenChooseSingle(2, index)"
            >
              {{ item }}
            </li>
          </ul>
        </div>
        <div class="screen-condition time">
          <div class="condition-title">时间：</div>
          <ul class="screen-condition-list time">
            <li
              v-for="(item, index) in dateOptions"
              :key="item.range"
              :class="{ active: chooseDateIndex == index }"
              @click="screenChooseSingle(3, index, item.range)"
            >
              {{ item.text }}
            </li>
            <li class="date-picker-wrap">
              <el-date-picker
                popper-class="search-result-date-picker-1"
                v-model="inputDateRange"
                :clearable="false"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="—"
                :picker-options="pickerOptions"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </li>
            <li
              class="active confirm-date"
              @click="requestQueryBid(searchMethod, true, true)"
            >
              确定
            </li>
          </ul>
        </div>
        <div class="screen-condition">
          <div class="condition-title">总金额：</div>
          <ul class="screen-condition-list money">
            <li
              v-for="(item, index) in moneyOptions"
              :key="item.text"
              :class="{ active: chooseMoneyIndex == index }"
              @click="screenChooseSingle(5, index, item.range)"
            >
              {{ item.text }}
            </li>
            <li class="money-custom">
              <input
                type="text"
                name="min-fee"
                v-model="customInputMoneyRange[0]"
                placeholder="最小金额"
                autocomplete="off"
              />
              —
              <input
                type="text"
                name="max-fee"
                v-model="customInputMoneyRange[1]"
                placeholder="最大金额"
                autocomplete="off"
              />
              万元
            </li>
            <li class="active confirm-date" @click="customMoney">确定</li>
          </ul>
        </div>
        <div class="screen-condition select-region">
          <div class="condition-title">地域：</div>
          <div class="select-region-wrap">
            <span
              :class="{ active: regionList.length === 0 }"
              @click="selectAllRegion"
              class="all"
              >全国</span
            >
            <el-select
              @change="provinceChange"
              filterable
              placeholder="省"
              style="width: 110px;height: 26px;"
              v-model="selectProvince"
            >
              <el-option
                :disabled="item.disabled"
                :key="item.key"
                :label="item.value"
                :value="item.value"
                v-for="item in provinceList"
              >
              </el-option>
            </el-select>
            <el-select
              @change="cityChange"
              filterable
              placeholder="市"
              style="width: 110px;height: 26px;margin-left: 26px;"
              v-model="selectCity"
            >
              <el-option
                :disabled="item.disabled"
                :key="item.key"
                :label="item.value"
                :value="item.value"
                v-for="item in cityList"
              >
              </el-option>
            </el-select>
            <!--                    <i @click="addRegion" class="icon icon-plus"></i>-->
            <button @click="addRegion" class="add-condition">添加条件</button>
            <span
              :key="item.code"
              class="btn-keywords-item"
              v-for="(item, index) in regionList"
            >
              {{ item.regionName }}
              <i
                @click="deleteRegion(index, item.regionLevel, item.regionCode)"
                class="icon icon-delete-keywords el-icon-close"
              >
              </i>
            </span>
          </div>
        </div>
        <div class="screen-condition select-item">
          <div class="condition-title">品目：</div>
          <ul class="screen-condition-list item">
            <li
              :class="{ active: chooseFirstItemIndex == index }"
              :key="item.id"
              @click="screenChooseSingle(6, index)"
              v-for="(item, index) in itemTop2List"
            >
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
        <div class="screen-condition select-item">
          <div class="condition-title"></div>
          <ul class="screen-condition-list item">
            <li
              :class="{ active: chooseSecondItemIndex.includes(index) }"
              :key="item.id"
              @click="screenChooseSingle(7, index)"
              v-for="(item, index) in secondItemList"
            >
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="search-result-wrap" ref="search-result-wrap">
        <div class="top" v-if="searchResultList.length !== 0">
          <ul class="content-nav">
            <li
              :class="{ active: searchSort == 2 }"
              @click="searchSortMethod(2)"
            >
              时间
            </li>
            <li
              :class="{ active: searchSort == 3 }"
              @click="searchSortMethod(3)"
            >
              <span>中标金额</span>
            </li>
            <li
              :class="{ active: searchSort == 4 }"
              @click="searchSortMethod(4)"
            >
              <span>预算金额</span>
            </li>
            <li
              :class="{ active: searchSort == 1 }"
              @click="searchSortMethod(1)"
              v-if="$store.state.searchResultType == 1"
            >
              相似度
            </li>
          </ul>
          <div
            class="data-export"
            v-if="searchPageType == 1 || searchPageType == 2"
            @click="exportSubscribeMessage(searchPageType)"
          >
            导出标讯
          </div>
        </div>

        <article>
          <ul
            class="search-result"
            v-loading="loading"
            element-loading-text="拼命加载中..."
          >
            <li
              class="no-result"
              v-if="
                !loading &&
                  searchResultList.length === 0 &&
                  $store.state.searchResultType == 1
              "
            >
              <p>暂无结果</p>
            </li>
            <li
              class="no-result"
              v-if="
                searchResultList.length === 0 &&
                  $store.state.searchResultType == 2
              "
            >
              <p>当前没有订阅的标讯信息</p>
              <!--<p @click="displaySubscriber">
              <i class="icon icon-subscriber"></i>
              <span>订阅器</span>
          </p>-->
            </li>
            <li
              class="no-result"
              v-if="
                searchResultList.length === 0 &&
                  $store.state.searchResultType == 3
              "
            >
              <p>当前没有收藏的标讯信息</p>
              <p @click="tabPageType(1)">
                <i class="icon icon-heart"></i><span>去收藏</span>
              </p>
            </li>
            <li v-for="(item, index) in searchResultList" :key="item.id">
              <div
                :class="{ active: item.isAttention }"
                @click="collection(index, item.id, item.isAttention)"
                class="collection"
              >
                <i class="icon-heart"></i>
                <span>收藏</span>
              </div>
              <h2 class="title">
                <nuxt-link
                  style="font-family: Microsoft YaHei;"
                  :to="'/detail/' + item.id"
                  target="_blank"
                  title="点击查看详情"
                  v-if="item.title"
                  v-html="jiamiProjectInfo(item.title)"
                ></nuxt-link>
              </h2>
              <!-- <strong> -->
              <ul class="tags-list">
                <li class="item tag-color-1" v-if="item.announcementTypeName">
                  <strong>{{ item.announcementTypeName }}</strong>
                </li>
                <li class="item tag-color-1" v-if="item.purchaseTypeName">
                  <strong>{{ item.purchaseTypeName }}</strong>
                </li>
                <li class="item tag-color-2" v-if="item.province">
                  <strong>{{ item.province }}</strong>
                </li>
                <li class="item tag-color-2" v-if="item.purchaserName">
                  <strong>{{ item.purchaserName }}</strong>
                </li>
                <li
                  class="item tag-color-3"
                  v-for="item2 in item.esItemAis"
                  :key="item2.item1Code"
                  v-show="item2.item1Name"
                >
                  <strong>{{ item2.item1Name }}</strong>
                </li>
                <li
                  style="font-family: Microsoft YaHei;"
                  class="item tag-color-4"
                  v-if="item.bidMoney"
                  v-html="jiamiNumber('中标', item.bidMoney / 1000000)"
                >
                  <!-- 中标 {{ item.bidMoney / 1000000 + '万元' }} -->
                </li>
                <li
                  style="font-family: Microsoft YaHei;"
                  class="item tag-color-4"
                  v-if="item.budgetMoney"
                  v-html="jiamiNumber('预算', item.budgetMoney / 1000000)"
                >
                  <!-- 预算 {{ item.budgetMoney / 1000000 + '万元' }} -->
                </li>
              </ul>
              <!-- </strong> -->
              <p
                style="font-family: Microsoft YaHei;"
                class="content"
                v-if="searchMethod == 1 && item.projectInfo"
                v-html="jiamiProjectInfo(item.projectInfo)"
              >
                <!-- {{ item.projectInfo }} -->
              </p>
              <p
                style="font-family: Microsoft YaHei;"
                class="content"
                v-if="searchMethod == 2 && item.pureContent"
                v-html="jiamiProjectInfo(item.pureContent)"
              ></p>

              <div class="content-keywords">
                <!-- <span class="date" v-if="item.projectDate">公告日期：{{ item.projectDate.substring(0, 10) }}</span> -->
                <span
                  style="font-family: Microsoft YaHei;"
                  class="date"
                  v-if="item.projectDate"
                  v-html="jiamiProjectDate(item.projectDate.substring(0, 10))"
                ></span>
                <span class="company winning-bidder" v-if="item.agencyName">{{
                  item.agencyName
                }}</span>
                <span class="company purchaser" v-if="item.companyName">{{
                  item.companyName
                }}</span>
              </div>
            </li>
          </ul>
        </article>

        <div class="pagination-wrap" v-if="searchResultList.length > 0">
          <el-pagination
            class="search-result-pagination"
            @current-change="handleCurrentChange"
            background
            :current-page="Number(listPageNum)"
            :page-size="listPageSize"
            :pager-count="11"
            layout="prev, pager, next"
            :total="listPageTotal"
            prev-text="< 上一页"
            next-text="下一页 >"
          >
          </el-pagination>
        </div>
      </div>
    </main>
    <dialog-box
      v-if="cancelCollectionShow"
      @closeDialogBox="closeDialogBox"
      cancel-text="再想想"
      confirm-text="取消收藏"
      sign-text="是否取消收藏这条标讯信息？"
    >
    </dialog-box>
    <dialog-box
      v-if="openMemberDialogShow"
      @closeDialogBox="closeMemberDialogBox"
      cancel-text="否"
      confirm-text="是"
      cancel-text-color="#686767"
      confirm-text-color="#F67B14"
      sign-text="此功能为会员专属，是否去开通？"
    >
    </dialog-box>
  </div>
</template>
<script>
import { request } from "@/plugins/httpSever";
import jiami from "../../plugins/jiami.js";

export default {
  asyncData(context) {
    // Universal keys
    const {
      app,
      store,
      route,
      params,
      query,
      env,
      isDev,
      isHMR,
      redirect,
      error,
      $config,
      $axios
    } = context;
    // Server-side
    if (process.server) {
      const { req, res, beforeNuxtRender } = context;
    }
    // Client-side
    if (process.client) {
      const { from, nuxtState } = context;
    }

    const promise1 = new Promise((resolve, reject) => {
      request.searchCondition().then(
        res => {
          if (res.status == 200) {
            res.data.announcements.unshift("全部");
            res.data.purchase.unshift("全部");
            res.data.provinces.unshift("全部");
            res.data.purchaser.unshift("全部");

            resolve({
              announcementOptions: res.data.announcements,
              purchaserOptions: res.data.purchaser,
              purchaseOptions: res.data.purchase
            });
          } else {
            reject(res.message);
          }
        },
        err => {
          console.log(err);
          reject(err);
        }
      );
    });

    const promise2 = new Promise((resolve, reject) => {
      // 请求加密key
      request.querySignParam().then(res => {
        //
        let dataTemp = res.data;
        // 获取加密key和时间戳
        let pageNumSign = jiami.AES_jiami(
          (query.page ? Number(query.page) - 1 : 0).toString(),
          dataTemp.key
        );
        let temp = pageNumSign + "10" + dataTemp.timestamp + dataTemp.salt;
        let sign = jiami.MD5_jiami(temp.toString());

        if (!params.type || params.type == 1) {
          const searchData = {
            queryText: query.keyword || null,
            purchaseTypeNameList: [],
            announcementTypeNameList: [],
            startTime: null,
            endTime: null,
            lowBidMoney: null,
            highBidMoney: null,
            regionList: [],
            level2ItemCodeList: null,
            sort: query.sort || 2,
            pageNum: query.page ? Number(query.page) - 1 : 0,
            pageSize: 10,
            pageNumSign: pageNumSign, // 加密后的pageNum
            sign: sign, // 加密后的参数
            timestamp: dataTemp.timestamp // 时间戳
          };

          request.queryBidTitle(searchData).then(
            res => {
              //标题搜索
              if (res.status == 200) {
                if (res.data) {
                  resolve({
                    searchResultList: res.data.content,
                    listPageTotal: res.data.totalElements
                  });
                } else {
                  resolve({});
                }
              } else {
                reject(res.message);
              }
            },
            err => {
              console.log(err);
              reject(err);
            }
          );
        } else {
          resolve({});
        }
      });
    });
    return Promise.allSettled([promise1, promise2]).then(
      res => {
        const returnRes = {};
        res.forEach(item => {
          if (item.status == "fulfilled") {
            Object.assign(returnRes, item.value);
          }
        });
        return returnRes;
      },
      err => {
        return {};
      }
    );
  },
  head() {
    const urlQuery = this.$route.params;
    let title = "全部";
    if (!urlQuery.type || urlQuery.type == 1) {
      title = urlQuery.keyword || title;
    } else if (urlQuery.type == 2) {
      title = "我的订阅";
    } else if (urlQuery.type == 3) {
      title = "我的收藏";
    }

    let keyword = urlQuery.keyword ? urlQuery.keyword : ''
    let keywordsContent = `${keyword},搜索结果,标讯搜索,易找标,正福易找标`
    return {
      title: title + " - 搜索结果" + this.utils.defaultTitleEnd,
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          // content: `${urlQuery.keyword},${urlQuery.keyword}-搜索结果,标讯搜索,易找标,正福易找标,易找标${this.utils.defaultTitleEnd}`
          content: keywordsContent

        }
      ]
    };
  },
  data() {
    return {
      title: "哈哈哈",
      loading: false,
      cancelCollectionShow: false,
      openMemberDialogShow: false,
      searchPageType: 0, //1、搜索 2、我的订阅搜索 3我的收藏搜索
      inputSearch: "", //输入内容
      searchHistoryShow: false,
      searchHistory: [],
      searchHistoryIndex: -1,
      searchMethod: 1, //1标题搜索、2全文搜索
      searchKeywords: "", //搜索关键字
      searchResultList: [], //搜索结果
      listPageNum: 1, //当前页
      listPageSize: 10, //单页数据数
      listPageTotal: null, //总数据数量
      searchSort: 2, //排序方式，1相似度排序；2时间排序；3标的金额排序；4预算金额排序；5id倒序
      announcementOptions: [], //公告类型
      purchaseOptions: [], //采购方式
      purchaserOptions: [],
      dateOptions: [
        {
          text: "全部",
          range: -1
        },
        {
          text: "今日",
          range: 0
        },
        {
          text: "近3日",
          range: 3
        },
        {
          text: "近1周",
          range: 7
        },
        {
          text: "近1月",
          range: 30
        },
        {
          text: "近3月",
          range: 90
        },
        {
          text: "近半年",
          range: 180
        }
      ],
      pickerOptions: {
        disabledDate: time => {
          return (function(time) {
            var times = Date.now();
            return time.getTime() > times;
          })(time);
        }
      },
      moneyOptions: [
        {
          text: "不限",
          range: []
        },
        {
          text: "100万以下",
          range: [0, 100]
        },
        {
          text: "100-500万",
          range: [100, 500]
        },
        {
          text: "500-1000万",
          range: [500, 1000]
        },
        {
          text: "1000-5000万",
          range: [1000, 5000]
        },
        {
          text: "5000万-1亿",
          range: [5000, 10000]
        },
        {
          text: "1亿以上",
          range: [10000, null]
        }
      ],
      choosePurchaseIndex: [0],
      chooseAnnouncementIndex: [0],
      chooseProvincesIndex: 0,
      choosePurchaserIndex: 0,
      chooseDateIndex: 0,
      chooseMoneyIndex: 0,
      inputDateRange: [], //筛选日期区间
      inputMoneyRange: [], //筛选金额区间
      customInputMoneyRange: [], //自定义输入金额区间
      selectProvince: "",
      selectProvinceCode: "",
      provinceList: [],
      selectCity: "",
      selectCityCode: "",
      cityList: [],
      regionList: [], //选择/添加的地区列表
      itemTop2List: [], //钱2级品目列表
      chooseFirstItemIndex: 0, //选择的第一级品目的index
      secondItemList: [], //选择的二级品目列表
      chooseSecondItemIndex: [0], //选择的第二级品目的index
      switchScreenOpen: true, //是否展开/收起筛选条件
      preCancelBidIndex: 0, //当前选中取消收藏的标讯index
      preCancelBidId: "", //当前选中取消收藏的标讯id
      fontMicrosoftYaHei: [
        "&#x5539;",
        "&#x5535;",
        "&#x555C;",
        "&#x558c;",
        "&#x558d;",
        "&#x558e;",
        "&#x558f;",
        "&#x5590;",
        "&#x5591;",
        "&#x5592;"
      ]
    };
  },
  created() {
    let searchPageType = 1;
    let type = this.$route.params.type;
    switch (type) {
      case "subscribe":
        searchPageType = 2;
        break;
      case "collect":
        searchPageType = 3;
        break;
    }
    this.searchPageType = searchPageType;
    this.$store.commit("changeSearchResultType", this.searchPageType);

    this.inputSearch = this.$route.query.keyword || this.inputSearch;
    this.searchMethod = this.$route.query.method
      ? this.$route.query.method
      : this.searchMethod;
    console.log(this.searchMethod);
    this.listPageNum = this.$route.query.page || this.listPageNum;
    this.searchSort = this.$route.query.sort || this.searchSort;
  },
  mounted() {
    if (this.$route.query.regionCode !== undefined) {
      this.regionList = [
        {
          regionCode: this.$route.query.regionCode,
          regionLevel: 1,
          regionName: this.$route.query.region
        }
      ];
    }

    this.searchHistory = JSON.parse(localStorage.getItem("searchHistory"))
      ? JSON.parse(localStorage.getItem("searchHistory"))
      : [];

    this.$request
      .searchRegion({
        level: 1
      })
      .then(
        res => {
          console.log(res);
          if (res.status == 200) {
            this.provinceList = res.data.filter(item => {
              let regExp = new RegExp(/香港|澳门|台湾/);
              return !regExp.test(item.value);
            });
          } else {
            this.requestError(res.status, res.message);
          }
        },
        err => {
          console.log(err);
          this.requestFail(err);
        }
      );

    this.$request.listTop2LevelItem().then(
      res => {
        console.log(res);
        if (res.status == 200) {
          res.data.forEach(item => {
            item.children.unshift({
              code: item.code + "00",
              id: item.code + item.id,
              parentCode: item.code,
              name: "全部"
            });
          });
          res.data.unshift({
            id: 0,
            code: "0",
            name: "全部",
            level: 1,
            children: []
          });
          this.itemTop2List = res.data;
          this.secondItemList = res.data[0].children;
        } else {
          this.requestError(res.status, res.message);
        }
      },
      err => {
        console.log(err);
        this.requestFail(err);
      }
    );

    if (this.searchPageType != 1) {
      this.requestQueryBid(this.searchMethod);
    }
    // 运行加密字体方法
    this.utils.addStyle();
  },
  destroyed() {
    this.$store.commit("changeSearchResultType", 0);
  },
  computed: {
    activeSearchHistory() {
      return this.searchHistory.slice(0, 10);
    }
  },
  watch: {
    $route(to, from) {
      this.searchPageType = to.query.type || this.searchPageType;
      this.$store.commit("changeSearchResultType", this.searchPageType);
      this.inputSearch = to.query.keyword || "";
      this.searchMethod = to.query.method || 1;
      this.searchKeywords = to.query.keyword || "";

      if (from.query.type && to.query.type != from.query.type) {
        this.searchSort = 2;
      }
      this.requestQueryBid(to.query.method, to.query.page == from.query.page);
      if (this.searchPageType == 2) {
        this.$request.clearSubscribeNum();
      }
    },
    inputSearch(newVal) {
      let inputMaxLength = 164;
      if (newVal.length > inputMaxLength) {
        this.inputSearch = newVal.substr(0, inputMaxLength);
      }
    },
    regionList() {
      this.computedSearchScreenHeight();
      this.requestQueryBid();
    },
    secondItemList() {
      this.computedSearchScreenHeight();
    }
  },
  methods: {
    // 加密数字
    jiamiNumber(text, itemData) {
      let itemTemp = itemData.toString().split("");
      let newNumber = [];
      itemTemp.forEach(item => {
        if (item === ".") {
          item = item;
        } else {
          item = this.fontMicrosoftYaHei[Number(item)];
        }
        newNumber.push(item);
      });
      let newTemp = newNumber.join("");
      return text + "  " + newTemp + "万元";
    },
    // 加密日期中的数字
    jiamiProjectDate(itemData) {
      let itemTemp = itemData.split("");
      let newNumber = [];
      itemTemp.forEach(item => {
        if (item === "-") {
          item = item;
        } else {
          item = this.fontMicrosoftYaHei[Number(item)];
        }
        newNumber.push(item);
      });
      let newTemp = newNumber.join("");
      return newTemp;
    },
    // 加密内容中的数字
    jiamiProjectInfo(itemData) {
      let itemTemp = itemData.replace(
        /(1)|(2)|(3)|(4)|(5)|(6)|(7)|(8)|(9)|(0)/g,
        match => {
          if (match == 0) {
            return "&#x5539;";
          } else if (match == 1) {
            return "&#x5535;";
          } else if (match == 2) {
            return "&#x555C;";
          } else if (match == 3) {
            return "&#x558c;";
          } else if (match == 4) {
            return "&#x558d;";
          } else if (match == 5) {
            return "&#x558e;";
          } else if (match == 6) {
            return "&#x558f;";
          } else if (match == 7) {
            return "&#x5590;";
          } else if (match == 8) {
            return "&#x5591;";
          } else if (match == 9) {
            return "&#x5592;";
          }
        }
      );
      return itemTemp;
    },
    requestExportSubscribeMessage(type) {
      let loading = this.$loading(this.utils.defaultLoadingOptions);

      if (this.listPageTotal && this.listPageTotal <= 10000) {
        let data = this.searchBaseParams();
        this.$request
          .exportSubscribeMessage({
            exportType: type,
            searchType: this.searchMethod,
            ...data
          })
          .then(
            res => {
              console.log("订阅标讯数据导出", res);
              if (res.status) {
                this.requestError(res.status, res.message);
              } else if (res) {
                loading.close();
                let date = new Date();
                const fileName =
                  "订阅标讯数据导出" +
                  "_" +
                  date.getFullYear() +
                  "-" +
                  (date.getMonth() + 1) +
                  "-" +
                  date.getDate() +
                  `.xlsx`;
                var blob = new Blob([res], {
                  type: "application/vnd.ms-excel;charset=UTF-8"
                });
                // console.log(blob)
                if (window.navigator.msSaveBlob) {
                  window.navigator.msSaveBlob(blob, fileName);
                } else {
                  window.URL = window.URL || window.webkitURL;
                  let downloadUrl = window.URL.createObjectURL(blob);
                  let downloadLink = document.createElement("a");
                  downloadLink.href = downloadUrl;
                  downloadLink.download = fileName;
                  document.body.appendChild(downloadLink);
                  downloadLink.click();
                  document.body.removeChild(downloadLink);
                }
              } else {
                this.$message({
                  type: "warning",
                  message: "请求数据异常，请稍后重试！"
                });
              }
            },
            err => {
              console.log(err);
              this.requestFail(err);
            }
          );
      } else {
        loading.close();
        this.$message({
          type: "warning",
          message: "单次最多支持导出10000条数据，请先进行筛选"
        });
      }
    },
    exportSubscribeMessage(type = 1) {
      //type导出类型  1普通筛选导出  2我的订阅导出
      if (type == 1) {
        let loading = this.$loading(this.utils.defaultLoadingOptions);
        this.$request.queryMemberStatus().then(
          res => {
            console.log("获取会员到期时间", res);
            loading.close();
            if (res.status == 200) {
              if (res.data && !res.data.isExpire) {
                this.requestExportSubscribeMessage(type);
              } else {
                this.openMemberDialogShow = true;
              }
            } else {
              this.requestError(res.status, res.message);
            }
          },
          err => {
            console.log(err);
            this.requestFail(err);
          }
        );
      } else {
        this.requestExportSubscribeMessage(type);
      }
    },
    inputKeyup(e) {
      console.log(e);
      if (e.keyCode == 40) {
        // console.log('按下了');
        if (this.searchHistoryIndex + 1 < this.searchHistory.length) {
          this.searchHistoryIndex += 1;
        } else {
          this.searchHistoryIndex = 0;
        }
        this.inputSearch = this.searchHistory[this.searchHistoryIndex].text;
      } else if (e.keyCode == 38) {
        // console.log('按上了');
        if (this.searchHistoryIndex > 0) {
          this.searchHistoryIndex -= 1;
        } else {
          this.searchHistoryIndex = this.searchHistory.length - 1;
        }
        this.inputSearch = this.searchHistory[this.searchHistoryIndex].text;
      }
    },
    clickInputSearch() {
      this.searchHistoryShow = true;
    },
    inputSearchBlur() {
      setTimeout(() => {
        this.searchHistoryShow = false;
      }, 500);
    },
    searchHistoryMouseover(index) {
      this.searchHistoryIndex = index;
    },
    searchHistoryClick(text) {
      this.inputSearch = text;
      this.updateQuery(this.searchMethod);
    },
    // 清除历史记录
    clearRecord() {
      localStorage.setItem("searchHistory", "[]");
      this.searchHistory = [];
    },
    closeMemberDialogBox(res) {
      this.openMemberDialogShow = false;
      if (res.confirm) {
        this.openMemberDialogShow = false;
        this.$store.commit("changeOpenMemberShow", true);
      }
    },
    closeDialogBox(res) {
      if (res.cancel || res.close) {
        this.$message({
          type: "info",
          message: "已取消本次操作！"
        });
      } else if (res.confirm) {
        this.$request
          .cancelBidAttention({
            bidId: this.preCancelBidId
          })
          .then(
            res => {
              console.log(res);
              if (res.status == 200) {
                this.$message({
                  type: "success",
                  message: "已取消收藏这条标讯！"
                });
                if (this.$store.state.searchResultType == 3) {
                  this.searchResultList.splice(this.preCancelBidIndex, 1);
                } else {
                  this.searchResultList[this.preCancelBidIndex].isAttention = 0;
                }
              } else {
                this.requestError(res.status, res.message);
              }
            },
            err => {
              console.log(err);
              this.requestFail(err);
            }
          );
      }
      this.cancelCollectionShow = false;
    },
    computedSearchScreenHeight() {
      setTimeout(() => {
        this.$refs["screen-condition-wrap"].style.height = "auto";
        this.screenConditionWrapMaxHeight = this.$refs[
          "screen-condition-wrap"
        ].offsetHeight;
        this.$refs["screen-condition-wrap"].style.height =
          this.screenConditionWrapMaxHeight + "px";
      });
    },
    clearSearchCondition() {
      this.choosePurchaseIndex = [0];
      this.chooseAnnouncementIndex = [0];
      this.chooseProvincesIndex = 0;
      this.choosePurchaserIndex = 0;
      this.chooseDateIndex = 0;
      this.chooseMoneyIndex = 0;

      if (this.regionList.length !== 0) {
        this.regionList = [];
      }

      this.chooseFirstItemIndex = 0;

      if (this.secondItemList.length !== 0) {
        this.secondItemList = [];
      }

      this.chooseSecondItemIndex = [0];
      this.inputMoneyRange = [];
      this.customInputMoneyRange = [];
      this.inputDateRange = [];

      this.requestQueryBid();
    },
    collection(index, id, isCollect = false) {
      if (isCollect) {
        this.preCancelBidIndex = index;
        this.preCancelBidId = id;
        // this.$store.commit('changeDialogBoxShow',true);
        this.cancelCollectionShow = true;
      } else {
        this.$request
          .addBidAttention({
            bidId: id
          })
          .then(
            res => {
              console.log(res);
              if (res.status == 200) {
                this.searchResultList[index].isAttention = 1;
                this.$message({
                  type: "success",
                  message: "收藏成功！"
                });
              } else {
                this.requestError(res.status, res.message);
              }
            },
            err => {
              console.log(err);
              this.requestFail(err);
            }
          );
      }
    },
    switchScreen() {
      console.log(this.$refs);
      if (this.switchScreenOpen) {
        this.$refs["screen-condition-wrap"].style.height = 0;
        this.$refs["btn-screen-icon"].setAttribute(
          "class",
          "el-icon-arrow-up transform"
        );
      } else {
        this.$refs["screen-condition-wrap"].style.height =
          this.screenConditionWrapMaxHeight + "px";
        this.$refs["btn-screen-icon"].setAttribute("class", "el-icon-arrow-up");
      }

      this.switchScreenOpen = !this.switchScreenOpen;
    },
    selectAllRegion() {
      this.regionList = [];
    },
    provinceChange(val) {
      console.log(val);
      this.selectCity = "";
      this.provinceList.forEach(item => {
        if (item.value === this.selectProvince) {
          this.selectProvinceCode = item.key;
        }
      });
      this.$request
        .searchRegion({
          level: 2,
          parentCode: this.selectProvinceCode
        })
        .then(
          res => {
            console.log(res);
            if (res.status == 200) {
              res.data.unshift({
                key: this.selectProvinceCode,
                value: "全部"
              });
              this.cityList = res.data;
              this.cityList.forEach(item => {
                this.regionList.forEach(item2 => {
                  if (item.key == item2.regionCode) {
                    item.disabled = true;
                  }
                });
              });
            } else {
              this.requestError(res.status, res.message);
            }
          },
          err => {
            console.log(err);
            this.requestFail(err);
          }
        );
    },
    cityChange() {
      this.cityList.forEach(item => {
        if (item.value === this.selectCity) {
          this.selectCityCode = item.key;
        }
      });
    },
    addRegion() {
      if (this.selectCity) {
        let newRegion = {};
        if (this.selectCityCode.search("0000") === -1) {
          //选择地级市
          newRegion = {
            regionCode: this.selectCityCode,
            regionName: this.selectCity,
            regionLevel: 2,
            parentCode: this.selectProvinceCode
          };
          this.cityList.forEach(item => {
            if (
              item.key.search("0000") !== -1 ||
              item.key == this.selectCityCode
            ) {
              item.disabled = true;
            }
          });
        } else {
          //选择全部
          newRegion = {
            regionCode: this.selectProvinceCode,
            regionName: this.selectProvince,
            regionLevel: 1
          };
          this.provinceList.forEach(item => {
            if (item.key == this.selectProvinceCode) {
              item.disabled = true;
            }
          });
          this.selectProvince = "";
          this.selectProvinceCode = "";
          this.cityList = [];
          this.selectCityCode = "";
        }

        this.selectCity = "";
        this.selectCityCode = "";
        this.regionList.push(newRegion);
      }
    },
    deleteRegion(index, regionLevel, code) {
      // console.log(index,regionLevel,code)
      this.regionList.splice(index, 1);
      if (regionLevel == 1) {
        this.provinceList.forEach(item => {
          if (code == item.key) {
            item.disabled = false;
          }
        });
      } else {
        this.cityList.forEach(item => {
          if (code == item.key) {
            item.disabled = false;
          }
        });

        let selectedCityList = this.cityList.filter(item => {
          return item.disabled;
        });
        console.log(selectedCityList);
        if (selectedCityList.length <= 1) {
          this.cityList[0].disabled = false;
        }
      }
    },
    displaySubscriber() {
      this.showSubscriber();
    },
    tabPageType(pageType = 1) {
      this.$router.push({
        name: "searchResult",
        query: {
          type: pageType
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listPageNum = val;
      this.updateQuery(this.searchMethod);

      this.$refs["search-result-wrap"].scrollIntoView({
        behavior: "instant",
        block: "start",
        inline: "nearest"
      });
    },
    screenChooseSingle(type, index, range) {
      //多选
      if (type === 1 || type === 2 || type === 7) {
        //采购方式、公告类型、二级品目
        let key =
          type == 1
            ? "choosePurchaseIndex"
            : type === 2
            ? "chooseAnnouncementIndex"
            : "chooseSecondItemIndex";
        if (index == 0) {
          this[key] = [];
          this[key].push(index);
        } else {
          if (this[key].includes(index)) {
            if (this[key].length === 1) {
              this[key] = [0];
            } else {
              this[key] = this[key].filter(function(ele) {
                return ele != index && ele != 0;
              });
            }
          } else {
            this[key].push(index);
            this[key] = this[key].filter(function(ele) {
              return ele != 0;
            });
          }
        }
      } else if (type === 3) {
        //日期
        const end = new Date();
        const start = new Date();
        if (range === -1) {
          this.inputDateRange = [];
        } else {
          start.setTime(start.getTime() - 3600 * 1000 * 24 * range);
          this.inputDateRange = [
            this.utils.formatDate(start).substr(0, 10),
            this.utils.formatDate(end).substr(0, 10)
          ];
        }
        // console.log(this.inputDateRange);
        this.chooseDateIndex = index;
      } else if (type === 4) {
        //采购人
        this.choosePurchaserIndex = index;
      } else if (type === 5) {
        //总金额
        this.chooseMoneyIndex = index;
        // console.log(range);
        this.inputMoneyRange = range;
        this.customInputMoneyRange = [];
      } else if (type === 6) {
        //一级品目
        this.chooseFirstItemIndex = index;
        this.chooseSecondItemIndex = [0];
        this.secondItemList = this.itemTop2List[index].children;
      }
      this.requestQueryBid();
    },
    customMoney() {
      this.chooseMoneyIndex = -1;
      if (
        parseInt(this.customInputMoneyRange[0]) >
        parseInt(this.customInputMoneyRange[1])
      ) {
        this.inputMoneyRange = this.customInputMoneyRange.reverse();
      } else {
        this.inputMoneyRange = this.customInputMoneyRange;
      }
      console.log(this.inputMoneyRange);
      this.requestQueryBid();
    },
    searchSortMethod(sort = 1) {
      if (this.searchSort !== sort) {
        this.searchSort = sort;
        this.listPageNum = 1;
        this.updateQuery(this.searchMethod);
      }
    },
    goDetail(id) {
      // console.log(id);
      let { href } = this.$router.resolve({
        name: "bidDetail",
        query: {
          id
        }
      });
      window.open(href, "_blank");
    },
    // 更新搜索
    updateQuery(method) {
      if (method !== this.searchMethod) {
        this.searchMethod = method;
      }
      if (this.$route.params.type !== this.searchPageType) {
        this.searchPageType = this.$store.state.searchResultType;
      }

      if (
        this.$route.query.keyword !== this.inputSearch ||
        this.$route.query.method !== this.searchMethod ||
        this.$route.query.page !== this.listPageNum ||
        this.$route.query.sort !== this.searchSort
      ) {
        this.$refs["search-input"].blur();
        this.$router.push({
          path: this.$route.path,
          query: {
            keyword: this.inputSearch,
            method: this.searchMethod,
            sort: this.searchSort,
            page: this.listPageNum
          }
        });

        document.title =
          this.inputSearch + "_搜索结果" + this.utils.defaultTitleEnd;
      }
      // this.searchKeywords = this.inputSearch;
    },
    searchBaseParams() {
      let purchaseTypeNameList = [];
      this.choosePurchaseIndex.forEach(item => {
        if (item !== 0) {
          purchaseTypeNameList.push(this.purchaseOptions[item]);
        }
      });
      let announcementTypeNameList = [];
      this.chooseAnnouncementIndex.forEach(item => {
        if (item !== 0) {
          announcementTypeNameList.push(this.announcementOptions[item]);
        }
      });
      let startTime = this.inputDateRange[0]
        ? this.inputDateRange[0] + " 00:00:00"
        : null;
      let endTime = this.inputDateRange[1]
        ? this.inputDateRange[1] + " 23:59:59"
        : null;

      let lowBidMoney = this.inputMoneyRange[0]
        ? this.inputMoneyRange[0] * 10000 * 100
        : null;
      let highBidMoney = this.inputMoneyRange[1]
        ? this.inputMoneyRange[1] * 10000 * 100
        : null;
      let level2ItemCodeList = [];
      this.chooseSecondItemIndex.forEach(item => {
        if (item !== 0) {
          level2ItemCodeList.push(this.secondItemList[item].code);
        } else {
          this.secondItemList.forEach(item => {
            level2ItemCodeList.push(item.code);
          });
        }
      });
      return {
        queryText: this.inputSearch.trim().substr(0, 38),
        purchaseTypeNameList,
        announcementTypeNameList,
        startTime,
        endTime,
        lowBidMoney,
        highBidMoney,
        regionList: this.regionList,
        level2ItemCodeList:
          this.chooseFirstItemIndex !== 0 ? level2ItemCodeList : null,
        sort: this.searchSort
      };
    },
    // 数据请求方法
    async requestQueryBid(method, resetPage = true, customDate = false) {
      //标讯搜索
      // this.updateQuery();
      this.searchKeywords = this.inputSearch;
      this.listPageNum = resetPage ? 1 : this.listPageNum;
      this.chooseDateIndex = customDate ? -1 : this.chooseDateIndex;
      this.searchResultList = [];
      this.listPageTotal = null;
      this.loading = true;

      // 获取key
      // const res = await this.$request.querySignParam()
      const res = await request.querySignParam();
      if (res.status !== 200) return;

      let dataTemp = res.data;
      // 获取加密key和时间戳
      let pageNumSign = this.jiami.AES_jiami(
        (this.listPageNum - 1).toString(),
        dataTemp.key
      );
      let temp =
        pageNumSign + this.listPageSize + dataTemp.timestamp + dataTemp.salt;
      let sign = this.jiami.MD5_jiami(temp.toString());

      let data = {
        pageNum: this.listPageNum - 1,
        pageSize: this.listPageSize,
        pageNumSign: pageNumSign, // 加密后的pageNum
        sign: sign, // 加密后的参数
        timestamp: dataTemp.timestamp, // 时间戳
        ...this.searchBaseParams()
      };
      let searchPageType = this.$store.state.searchResultType;

      if (searchPageType == 1) {
        if (this.searchMethod == 1) {
          this.$request.queryBidTitle(data).then(
            res => {
              //标题搜索
              console.log(res);
              this.loading = false;
              if (res.status == 200) {
                if (res.data) {
                  this.searchResultList = res.data.content;
                  this.listPageTotal = res.data.totalElements;
                } else {
                  this.searchResultList = [];
                  this.listPageTotal = 0;
                }
              } else {
                this.requestError(res.status, res.message);
              }
            },
            err => {
              this.loading = false;
              this.requestFail(err);
            }
          );
        } else {
          this.$request.queryBidContent(data).then(
            res => {
              //全文搜索
              console.log(res);
              this.loading = false;
              if (res.status == 200) {
                if (res.data) {
                  this.searchResultList = res.data.content;
                  this.listPageTotal = res.data.totalElements;
                } else {
                  this.searchResultList = [];
                  this.listPageTotal = 0;
                }
              } else {
                this.requestError(res.status, res.message);
              }
            },
            err => {
              this.loading = false;
              this.requestFail(err);
            }
          );
        }
      } else if (searchPageType == 2) {
        //我的订阅
        if (this.searchMethod == 1) {
          this.$request.queryBidTitleInSubscribe(data).then(
            res => {
              //标题搜索
              console.log(res);
              this.loading = false;
              if (res.status == 200) {
                this.$store.commit("changeSubscriberMessageNum", 0);
                this.$request.clearSubscribeNum();
                if (res.data) {
                  this.searchResultList = res.data.content;
                  this.listPageTotal = res.data.totalElements;
                } else {
                  this.searchResultList = [];
                  this.listPageTotal = 0;
                }
              } else {
                this.requestError(res.status, res.message);
              }
            },
            err => {
              this.loading = false;
              this.requestFail(err);
            }
          );
        } else {
          this.$request.queryBidContentInSubscribe(data).then(
            res => {
              //全文搜索
              console.log(res);
              this.loading = false;
              if (res.status == 200) {
                this.$store.commit("changeSubscriberMessageNum", 0);
                this.$request.clearSubscribeNum();
                if (res.data) {
                  this.searchResultList = res.data.content;
                  this.listPageTotal = res.data.totalElements;
                } else {
                  this.searchResultList = [];
                  this.listPageTotal = 0;
                }
              } else {
                this.requestError(res.status, res.message);
              }
            },
            err => {
              this.loading = false;
              this.requestFail(err);
            }
          );
        }
      } else if (searchPageType == 3) {
        //我的收藏
        if (this.searchMethod == 1) {
          this.$request.queryBidTitleInAttention(data).then(
            res => {
              //标题搜索
              console.log(res);
              this.loading = false;
              if (res.status == 200) {
                if (res.data) {
                  this.searchResultList = res.data.content;
                  this.listPageTotal =
                    res.data.totalElements < 10000
                      ? res.data.totalElements
                      : 10000;
                  /*this.searchResultList.forEach(item=>{
                    item.isCollect = true;
                })*/
                } else {
                  this.searchResultList = [];
                  this.listPageTotal = 0;
                }
              } else {
                this.requestError(res.status, res.message);
              }
            },
            err => {
              this.loading = false;
              this.requestFail(err);
            }
          );
        } else {
          this.$request.queryBidContentInAttention(data).then(
            res => {
              //全文搜索
              console.log(res);
              this.loading = false;
              if (res.status == 200) {
                if (res.data) {
                  this.searchResultList = res.data.content;
                  this.listPageTotal = res.data.totalElements;
                } else {
                  this.searchResultList = [];
                  this.listPageTotal = 0;
                }
              } else {
                this.requestError(res.status, res.message);
              }
            },
            err => {
              this.loading = false;
              this.requestFail(err);
            }
          );
        }
      }
      // end
      // })

      if (this.inputSearch.trim()) {
        this.searchHistory = this.searchHistory.filter(item => {
          return item.text != this.inputSearch;
        });
        this.searchHistory.unshift({
          key: this.utils.getTimestamp(),
          text: this.inputSearch
        });
        localStorage.setItem(
          "searchHistory",
          JSON.stringify(this.searchHistory.slice(0, 100))
        );
      }
    }
  }
};
</script>

<style scoped lang="less">
.container {
  background-color: #ffffff;
  padding-bottom: 64px;

  .search-wrap {
    .size(100%, 110px);
    .min-width(1200px);
    background-color: #f5f5fb;

    .search-box {
      .size(1200px);
      .center(auto-x);
      position: relative;

      .search {
        .clearfix;
        .height(42px);
        /*overflow: hidden;*/
        .fz(18px);
        .center(known-y, 42px);
        left: 110px;

        & > div {
          .fl;
        }

        .input-wrap {
          .size(440px);
          border: 2px solid @main-color;
          border-right: none;
          .border-radius(4px 0 0 4px);
          background-color: #ffffff;
          position: relative;

          i.icon-search {
            display: inline-block;
            // display: block;
            .size(56px);
            /*background: url("../assets/img/search-result_icon-search.png");*/
            .bg("@{img-base-url}search-result_icon-search.png");
            background-size: auto;
            vertical-align: middle;
          }

          input {
            .size(375px);
            border: none;
            outline: none;
            vertical-align: middle;
            background-color: transparent;
            position: absolute;
            left: 56px;
            top: 0;
          }

          #query-search {
            .size(442px, auto);
            position: absolute;
            left: -2px;
            top: 40px;
            background-color: #ffffff;
            z-index: 100;
            border: 2px solid #f67b14;
            border-top: none;
            cursor: pointer;
            .fz(14px);
            line-height: 26px;

            & > li {
              padding: 0 5px;
              .ellipsis;

              &.active {
                background-color: #f7982b;
              }
            }
          }
        }

        .btn {
          .size(102px);
          .center(text-x);
          .lh(42px);
          .color(#ffffff);

          &.btn-search-title {
            background-color: #ffba00;
            cursor: pointer;
          }

          &.btn-search-all {
            background-color: @main-color;
            cursor: pointer;
            .border-radius(0 4px 4px 0);
          }
        }

        .btn-screen {
          .lh(42px);
          margin-left: 20px;
          cursor: pointer;

          i {
            .transition(1s);

            &.transform {
              transform: rotateZ(180deg);
              .transition(1s);
            }
          }
        }

        .clear-search-condition {
          .lh(42px);
          margin-left: 21px;
          .color(#999999);
          .fz(14px);
          cursor: pointer;
        }
      }

      .keywords {
        .fz(14px);
        margin-top: 30px;
        text-align: left;
        position: absolute;
        top: 56px;
        left: 110px;
      }
    }
  }

  .screen-condition-wrap {
    .size(1200px, auto);
    .center(auto-x);
    border: 1px solid #e6e6e6;
    padding: 0 12px 0 9px;
    margin-top: 26px;
    overflow: hidden;
    .transition(1s);

    .screen-condition {
      padding: 20px 0;
      .clearfix;

      & + .screen-condition {
        border-top: 1px dotted #e6e6e6;
      }

      .condition-title {
        .width(86px);
        .fz(16px);
        .color(#757575);
        .fl;
        .lh(22px);
        text-align: right;
      }

      ul.screen-condition-list {
        @mt: 14px;
        @ml: 15px;
        .fl;
        .fz(14px);
        .max-width(1080px);
        margin-top: -@ml;
        //margin-left: -@ml;

        & > li {
          .fl;
          .lh(22px);
          padding: 0 5px;
          margin-left: @ml;
          margin-top: @ml;
          cursor: pointer;

          &.date-picker-wrap {
            .height(auto);
            //margin-top: 10px;
          }

          &.money-custom {
            margin-top: 12.5px;
            .height(auto);

            input {
              .size(160px, 26px);
              border: 1px solid @main-color;
              .border-radius(2px);
              outline: none;
              .center(text-x);
              .beauty-placeholder(custom, color, #c0c4cc);
            }
          }

          &.active {
            background-color: @main-color;
            .color(#ffffff);
            .border-radius(2px);
            /*cursor: default;*/

            &.confirm-date {
              margin-left: 20px;
              cursor: pointer;
            }
          }
        }
      }

      &.select-region {
        .select-region-wrap {
          .width(1080px);
          .fl;
          padding-left: 15px;

          .all {
            .fz(14px);
            margin-right: 10px;
            padding: 0 5px;
            cursor: pointer;

            &.active {
              background-color: @main-color;
              .color(#ffffff);
              .border-radius(2px);
              cursor: default;
            }
          }

          i.icon-plus {
            .size(14px, 14px);
            .bg("@{img-base-url}subscriber_icon-add.png");
            vertical-align: middle;
            margin-left: 10px;
            cursor: pointer;
            .color(@main-color);
          }

          button.add-condition {
            padding: 2px 10px;
            background-color: @main-color;
            .color(#ffffff);
            .border-radius(2px);
            font-family: AlibabaPuHuiTiR;
            .fz(14px);
            margin-left: 10px;
          }

          .btn-keywords-item {
            display: inline-block;
            padding: 7px 10px;
            //background-color: @main-color;
            border: 1px solid @main-color;
            .border-radius(4px);
            vertical-align: middle;
            .color(@main-color);
            line-height: 1;
            .fz(14px);
            box-sizing: border-box;

            &:nth-of-type(1) {
              margin-left: 20px;
            }

            margin-left: 10px;

            .icon-delete-keywords {
              .fz(10px);
              font-weight: bold;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .search-result-wrap {
    .size(1200px);
    .center(auto-x);
    margin-top: 20px;

    .top {
      .clearfix;
      .size(100%, 50px);
      border: 1px solid #e6e6e6;

      .content-nav {
        .fl;
        margin-left: 21px;
        .fz(18px);

        & > li {
          .fl;
          padding: 0 24px;
          .lh(50px);
          position: relative;
          cursor: pointer;

          & + li {
            margin-left: 32px;
          }

          &:hover {
            .color(@main-color);
          }

          &.active {
            .color(@main-color);
            cursor: default;

            &:after {
              display: block;
              position: absolute;
              left: 0;
              bottom: 2px;
              width: 100%;
              height: 1px;
              background-color: @main-color;
              content: "";
            }
          }

          &:nth-of-type(2) {
            span {
              vertical-align: middle;
            }

            i {
              .size(13px, 15px);
              .bg("@{img-base-url}search-result_icon-sort-normal.png");
              margin-left: 8px;
            }

            &:hover {
              i {
                .bg("@{img-base-url}search-result_icon-sort-active.png");
              }
            }

            &.active {
              i {
                .bg("@{img-base-url}search-result_icon-sort-active.png");
              }
            }
          }
        }
      }

      .data-export {
        .fr;
        line-height: 50px;
        margin-right: 20px;
        cursor: pointer;
        color: @main-color;
      }

      .order-select {
        .fr;
        .fz(14px);
        .lh(50px);

        & > li {
          .fl;
          margin-right: 31px;
          cursor: pointer;

          &.active {
            .color(@main-color);
            cursor: default;
          }
        }
      }
    }

    ul.search-result {
      .min-height(300px);

      & > li {
        position: relative;
        padding: 30px 20px;
        border-bottom: 1px solid #ebebeb;

        &.no-result {
          border: none;
          text-align: center;
          margin-top: 100px;
          .fz(18px);
          .color(#757575);
          line-height: 50px;

          i {
            &.icon-subscriber {
              .size(20px, 20px);
              .bg("@{img-base-url}subscriber_icon-shopping-active.png");
            }

            &.icon-heart {
              .size(17px, 15px);
              .bg("@{img-base-url}search-result_icon-heart-active-empty.png");
            }

            & + span {
              .color(@main-color);
              cursor: pointer;
            }
          }
        }

        .collection {
          position: absolute;
          top: 30px;
          right: 20px;
          .color(#888888);
          .fz(16px);
          cursor: pointer;

          i {
            display: inline-block;
            .size(16px, 12px);
            /*background: url("../assets/img/search-result_icon-heart.png");*/
            .bg("@{img-base-url}search-result_icon-heart.png");
            vertical-align: middle;
            margin-right: 2px;
          }

          &.active {
            .color(@main-color);

            i {
              .bg("@{img-base-url}search-result_icon-heart-active.png");
            }
          }
        }

        .title {
          font-weight: normal;
          .fz(16px);
          .max-width(1100px);
          //cursor: pointer;
          /*line-height: 25px;*/
          .ellipsis;

          a {
            text-decoration: none;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        ul.tags-list {
          @ml: 10px;
          .clearfix;
          .color(#ffffff);
          margin-left: -@ml;

          & > li {
            strong {
              font-weight: normal;
            }
            
            .fl;
            .fz(14px);
            padding: 5px 10px;
            .border-radius;
            margin-left: @ml;
            margin-top: 20px;
          }
        }

        .content {
          .fz(14px);
          .color(#888888);
          line-height: 24px;
          margin-top: 19px;
        }

        .content-keywords {
          @ml: 34px;
          .fz(14px);
          margin-top: 19px;
          margin-left: -@ml;

          span {
            margin-left: @ml;
          }
        }
      }
    }

    .pagination-wrap {
      .clearfix;
      margin-top: 134px;
      margin-right: 20px;
    }
  }
}
</style>
<style lang="less">
#page-search-result {
  .select-region {
    .el-input {
      height: 100%;

      input {
        height: 100%;
      }

      .el-input__inner:focus {
        border-color: @main-color;
      }

      &.el-input.is-focus .el-input__inner {
        border-color: @main-color;
      }

      span.el-input__suffix {
        height: 100%;

        i {
          line-height: 26px;
        }
      }
    }
  }

  .search-result-pagination {
    .fr;
    padding: 0;

    .btn-prev,
    .btn-next {
      .size(79px, 36px);
      .fz(14px) !important;
      .color(#252627) !important;
      background-color: #ffffff !important;
      border: 1px solid #ebebeb !important;

      &:disabled {
        .color(#c0c4cc) !important;
      }
    }

    .el-pager {
      li {
        .min-width(36px) !important;
        .lh(36px);
        .fz(20px);
        .color(#888888) !important;
        font-weight: lighter;
        .border-radius(4px) !important;
        background-color: #ffffff !important;
        border: 1px solid #ebebeb !important;

        &.active {
          background-color: @main-color !important;
          .color(#ffffff) !important;
        }

        &.el-icon-more {
          border: none !important;

          &.btn-quicknext,
          &.btn-quicknext + li {
            display: none !important;
          }
        }

        &.el-icon-d-arrow-right,
        &.el-icon-d-arrow-left {
          border: none !important;
          .color(@main-color) !important;
        }
      }
    }
  }

  .date-picker-wrap {
    .height(auto);
    margin-top: 6px;

    .el-date-editor {
      border: none;

      i.el-icon-date {
        display: none;
      }

      .el-range-separator {
        display: inline-block;
        .width(32px);
        .fz(14px);
        padding: 0 9px;
      }

      .el-range-input {
        .size(160px, 26px);
        border: 1px solid @main-color;
        .border-radius(2px);
      }
    }
  }
}

.search-result-date-picker-1 {
  @main-color: #f67b14;

  .el-date-table {
    td {
      &:hover {
        span {
          .color(@main-color) !important;
        }
      }

      &.today {
        span {
          .color(@main-color) !important;
        }
      }

      &.start-date {
        span {
          background-color: @main-color !important;
          .color(#ffffff) !important;
        }
      }

      &.end-date {
        span {
          background-color: @main-color !important;
          .color(#ffffff) !important;
        }
      }

      &.in-range {
        div {
          background-color: rgba(246, 123, 20, 0.1) !important;
        }
      }
    }
  }
}
</style>
